import React, { PureComponent } from "react";
import { connect } from "react-redux";
import {
    actions,
    getNavList,
    getShowGoods,
} from "../../store/modules/home";
import { bindActionCreators } from "redux";
//引入图片
import logo2 from "../../assets/img/logo2.png"
import juan4 from "../../assets/img/home_youhuijuan4.png"
import home_menu from "../../assets/img/home_menu.png"
import home_qianggou from "../../assets/img/home_qianggou.png"
import home_menu1 from "../../assets/img/home_menu1.png"
// 引入css
import "./Home.css"
// 引入模块
import NewP from "./components/NewP/NewP"
import MiaoSha from "./components/MiaoSha/MiaoSha";
import ShangP from "./components/ShangP/ShangP";
class Home extends PureComponent {
    tiao(){
        this.props.history.push("/sousuo")
    }
    render() {
        return (
            <div id="home">
                {/* 搜索 */}
                <div className="sousuo">
                    <img src={logo2} alt="" />
                    <input type="text" className="iconfont" placeholder=" &#xe610; 按内容搜索" onClick={()=>this.tiao()}/>
                    <i>搜索</i>
                    <span className="iconfont ii">&#xe613;</span>
                </div>
                {/* 渐变背景色 */}
               <NewP></NewP>
                {/* 限时秒杀图 */}
                <div className="home_menu">
                    <img src={home_menu} alt="" />
                </div>
                {/* 超级秒杀 */}
                <div className="chaoji">
                    <div className="d1">
                        <h3>超级秒杀</h3>
                        <p>05:42:37</p>
                    </div>
                    <div className="d2">
                        <img src={juan4} alt="" className="img1" />
                        <div>
                            <p className="p1">
                                <span>7.9折</span>
                                溪牧原山茶花洁面乳精选太行山最优质……
                            </p>
                            <p className="p2">
                                <b></b>
                                <em></em>
                                <i>30%</i>
                                <span>每人限购1件</span>
                            </p>
                            <p className="p3">
                                <span>29.99</span>
                                <del>69.9</del>
                                <img src={home_qianggou} alt="" className="img2" />
                            </p>
                        </div>
                    </div>
                </div>
                {/* 限时秒杀 */}
                <MiaoSha></MiaoSha>
                <div className="tu">
                    <img src={home_menu1} alt="" />
                </div>
                {/* 综合推荐 */}
                <div className="tuijian">
                    <h3>综合推荐</h3>
                    <span>销量</span>
                    <span>价格</span>
                    <span>好评度</span>
                    <span>店铺</span>
                    <em>分类</em>
                </div>
                {/* 商品 */}
                <ShangP></ShangP> 
            </div>
        );
    }
}

let mapStateToProps = (state) => {
    return {
        navList: getNavList(state),
        goods: getShowGoods(state),
    };
};
let mapDispatchToProps = (dispatch) => {
    return {
        homeActions: bindActionCreators(actions, dispatch),
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(Home);
